<template>
  <div class="left-center-box">
    <group-card :title="title">
      <div class="left-center-box-inner">
        <!-- 图表区域 -->
        <div class="my-chart" ref="myChartRef"></div>
      </div>
      <ComTab :tab-value="personType" @change="handleChangeTab" />
    </group-card>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
  title: String,
  personType: String,
});
console.log(props.echartsData, "aaaaaaaaa");

const emits = defineEmits(["tabChange", "update:personType"]);

const handleChangeTab = (val) => {
  emits("update:personType", val);
  emits("tabChange");
};

// const hourTimes = []
// for (let i = 0; i < 24; i++) {
//   hourTimes.push(i+ ':00')
// }

const myChartRef = ref(null);
// data
const state = reactive({
  // echarts 配置
  chart: null,
  echartsOptions: {
    tooltip: {
      type: "scroll",
      trigger: "axis",
      scrollDataIndex: 5,
      backgroundColor: "#0000005C",
      position: ["40%", "0%"],
      textStyle: {
        color: "#fff",
        height: 14,
        lineHeight: 20,
      },
    },
    grid: {
      top: "20%",
      left: "10%",
      right: "4%",
      bottom: "18%",
      zIndex: 2,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        interval: 4,
        width: 56,
        overflow: "breakAll",
        textStyle: {
          fontSize: 11,
          color: "#fff",
        },
        // rotate: 45,
      },
      // boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: "value",
      name: "(人)",
      nameLocation: "end",
      // data: [0, 2000, 4000, 6000],
      splitNumber: "4",
      min: "0",
      minInterval: 1,
      axisLine: { onZero: false },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      // max: "6000",
    },
    series: [
      {
        type: "line",
        itemStyle: {
          color: "#29ABC3",
        },
        smooth: true, //曲线
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#29ABC3",
            },
            {
              offset: 1,
              color: "#3B6DB4",
            },
          ]),
        },
        data: [],
      },
    ],
  },
});
const { chart, echartsOptions } = toRefs(state);

watch(
  () => props.echartsData,
  () => {
    updateChart();
  }
);
//methods
const updateData = () => {
  state.echartsOptions.xAxis.data = props.echartsData.map((item) => item.name);
  state.echartsOptions.series[0].data = props.echartsData.map((item) => {
    return item.count;
  });
};
// 初始化图表
const initEcharts = () => {
  updateData();
  chart.value = shallowRef(echarts.init(myChartRef.value));
  const initOptions = echartsOptions.value;
  chart.value.setOption(initOptions);
};
const updateChart = () => {
  updateData();
  const updateOptions = echartsOptions.value;
  chart.value.setOption(updateOptions);
};

// // 修改图表
// const updateChart = () => {
//   const updateOptions = echartsOptions.value;
//   chart.value.setOption(updateOptions);
// };
// 屏幕适配
const screenAdaperPh = () => {
  chart.value.setOption(echartsOptions.value);
  nextTick(() => {
    chart.value.resize();
  });
};
onMounted(() => {
  initEcharts();
  window.addEventListener("resize", screenAdaperPh);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", screenAdaperPh);
});

defineExpose({
  // updateChart,
});
</script>

<style lang="scss" scoped>
.left-center-box {
  // height: 226px;
  height: 270px;
  // background-color: #979494;

  margin-top: 30px;
  display: flex;
  flex-direction: column;
  .left-center-box-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 15px 20px;

    .my-chart {
      height: 180px;
    }
  }
}
</style>
